import Vue from 'vue'
import Vuex from 'vuex'
import http from '@/utils/https'
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex)

export default new Vuex.Store({
  // github官网  持久化
  plugins: [createPersistedState({
    reducer : (state)=>{
      return{
        // 可以设置哪一些不持久化,默认全部持久化,没有设置cityList,那么就不持久化
        city:state.city,
        cityId:state.cityId
      }
    }
  })],
  
  // 固定写法,公共的部分
  state: {
    city : '上海',
    cityId : 12,
    cityList : []
  },
  getters: {
  },
  // 固定写法  用于统一管理和监督   只支持同步,不支持异步
  mutations: {
    // 方法名,任意,参数state固定写法,value任意
    changeCity(state,value){
      state.city = value;
    },

    getCityLists(state,data){
      state.cityList = data
    },
    clearCityList(state){
      state.cityList = []
    }
  },
  // 支持异步和同步
  actions: {
    getCityList(store,city){
      // http({
      //   url : `xx${city}`
      // }).then(res =>{
      //   // 调用同步方法
      //   store.commit('getCityLists',res.data)
      // })

      // 变成promise对象 可以调用then了,detil.vue里面演示
      return http({
        url : `xx${city}`
      }).then(res =>{
        //  先执行的是这里面的then方法,然后才是detil.vue里面调用的then方法
        store.commit('getCityLists',res.data)
      })
    }
  },
  modules: {
  }
})



// vuex 持久化

// vuex 默认管理的是在内存中的,一刷新页面,就消失了
